<template>
  <!-- 理赔工作列表模块-理赔二核 -->
  <div class="fillcontain">
    <!-- 查询条件 -->
    <div class="fastQuery">
      <el-row>
        <el-col :span="2" class="fastQuery_title"><i class="el-icon-tickets"></i><span> 查询条件</span></el-col>
        <el-col :span="10">
          <!--<el-badge :value="warnCount" class="item fastQuery_item">
                        <el-button size="small" :class="{isActive:searchParams.queryType == 'WARN'}"
                                   @click="searchParams.queryType = 'WARN';getList(); ">预警
                        </el-button>
                    </el-badge>
                    <el-badge :value="paginations.total" class="item fastQuery_item" type="warning">
                        <el-button size="small" :class="{isActive:searchParams.queryType == 'TODO'}"
                                   @click="searchParams.queryType = 'TODO';getList();">全部
                        </el-button>
                    </el-badge>-->
        </el-col>
        <el-col :span="4" class="moreCondition">
          <span v-if="!isShow" @click="showorhide">更多条件 <i class="el-icon-d-arrow-right"></i></span>
          <span v-if="isShow" @click="showorhide">收起 <i class="el-icon-d-arrow-left"></i></span>
        </el-col>
        <el-col :span="8"></el-col>
      </el-row>
    </div>
    <!-- 查询表单 -->
    <el-form v-show="isShow" :model="searchParams" :rules="rules" ref="ruleForm" label-width="120px"
             class="search_container">
      <el-row>
        <el-col :span="6">
          <el-form-item label="理赔号" prop="caseno">
            <el-input clearable v-model="searchParams.caseno" placeholder="理赔号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="投保人" prop="policyholdername">
            <el-input clearable v-model="searchParams.policyholdername" placeholder="投保人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="被保人" prop="insuredname">
            <el-input clearable v-model="searchParams.insuredname" placeholder="被保人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="理赔形态" prop="clmstate">
            <el-select clearable v-model="searchParams.clmstate" placeholder="理赔形态">
              <el-option v-for="item in clmstates" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="审核员" prop="sfirchkusr">
            <el-input clearable v-model="searchParams.sfirchkusr" placeholder="审核员"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保单服务类型" prop="flag06">
            <el-select clearable v-model="searchParams.flag06" placeholder="理赔形态">
              <el-option v-for="item in flag06s" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="text_center">
          <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
          <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
        </el-col>
      </el-row>

    </el-form>

    <div class="contain">
      <!-- 操作按钮 -->
      <el-row>
        <el-col :span="24" class="pb15 pt5">
          <div v-if="showNext" style="display: inline;">
            <el-button type="danger" style="margin-left: 10px;" plain v-for="(value, key) in nextNodeMap" :key="key"
                       @click="exchangeNode(key)">{{ nextNodeMap[key].destNodeName }}
            </el-button>
            <el-button type="danger" style="margin-left: 10px;" plain @click="lock()">加锁</el-button>
            <el-button type="danger" plain @click="unlock()">解锁</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 查询结果列表 -->
      <div class="table_container">
        <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" highlight-current-row
                  header-cell-class-name="table-header-class" @selection-change="handleSelectionChange" :row-style="rowStyle"
                  empty-text="无符合查询条件任务" style="width:100%">
          <el-table-column type="selection"></el-table-column>
          <el-table-column property="schkousrid" label="检出人" align='center' min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="orgName" label="机构" align='center' min-width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="channel" label="渠道" align='center' min-width="50" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="scaseno" label="理赔号" align='center' min-width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="spolicyer" label="投保人" align='center' min-width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="sinsured" label="被保险人" align='center' min-width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="sclmstatus" label="理赔形态" align='center' min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="sapptime" label="受理日" align='center' min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="sfirchkusr" label="审核人员" align='center' min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="ssecchkusr" label="复核人员" align='center' min-width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="sdealtime" label="最后处理时间" align='center' min-width="160" show-overflow-tooltip>
          </el-table-column>
          <el-table-column property="staskno" label="任务启动时间" align='center' :formatter="getCreateTime" min-width="160"
                           show-overflow-tooltip></el-table-column>
          <el-table-column property="remark01" label="Two Case" align='center' min-width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column fixed="right" property="imageInfo" label="影像信息" align='center' min-width="100">
            <template slot-scope="scope">
              <span class="operationIcon" @click="showImageList(scope.row.scaseno)">
                <i class="el-icon-camera"></i>
              </span>
            </template>
          </el-table-column>
          <!-- <el-table-column fixed="right" label="操作" align='center' min-width="50">
                        <template slot-scope="scope">
                            <! <el-button type="text" size="small" @click="hebao(scope.row.policyholderno,scope.row.insuredno)">核保</el-button> -->
          <!-- <span class="operationIcon" @click="hebao(scope.row.policyholderno,scope.row.insuredno)">
                                <i class="el-icon-receiving"></i>
                            </span>
                        </template> -->
          <!-- </el-table-column> -->
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes"
                             :page-size="paginations.pageSize" :layout="paginations.layout" :total="paginations.total"
                             :current-page='paginations.pageIndex' @current-change='handleCurrentChange'
                             @size-change='handleSizeChange'>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--影像列表-->
    <clm-image-list :drawer="showImageFlag" :applnum="showImageApplnum" :busiType="clm_uw" @close="hideImageList">
    </clm-image-list>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { page, clmLock, clmUnlock, clmExchangeNode } from "@/api/taskCenter/clmTask";
import { getNextNodes, getNodeMap, getSsyOrgMap, getDocTypeMap, warnOrTimeOutCount } from "@/api/taskCenter/taskCommon";
import constant from '@/utils/constant';
import taskConstants, { getSelectList } from '@/utils/taskConstants';
import ClmImageList from "@/page/common/clmImageList";


export default {
  components: {
    ClmImageList,
  },
  data() {
    return {
      warnCount: 0,//预警个数
      ssyMap: {},//机构对象
      nodeMap: {},//节点对象
      docTypeMap: {},//文件类型对象
      nextNodeMap: {},
      flag06s: [],
      clm_uw: 'clm_uw',//只针对理赔二核的影像查询特殊处理标记
      clmstates: [],
      showNext: false,
      isShow: false,
      remarkTaskNo: "",
      showRemarkFlag: false,
      changeTaskNo: "",
      showChangeFlag: false,
      showAddRenewalFlag: false,
      showImageFlag: false,
      showImageApplnum: '',
      // 查询条件
      rules: {
        policyNo: [],
        acceptNo: [],
        channel: [],
        taskRank: [],
        markNo: [],
        institution: [],
        acceptdate: [],
        order: []
      },
      searchParams: {
        pool: "",//
        clmstate: "",//理赔形态
        caseno: "",//受理号号
        insuredname: "",//被保人姓名
        policyholdername: "",
        flag06: "",//保单服务类型
        sfirchkusr: '',
        queryType: 'TODO',
        pageSize: "",
        pageNumber: "",
      },
      orderList: constant.order,
      multipleTable: [],
      tableData: [],
      loading: false,
      //需要给分页组件传的信息
      paginations: {
        total: 0,        // 总数
        pageIndex: 1,  // 当前位于哪页
        pageSize: 20,   // 1页显示多少条
        pageSizes: [5, 10, 15, 20],  //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      isFirstEnter: false
    }
  },
  created() {

    this.nextNodes();
  },
  activated() {
    this.getList();
    document.onkeydown = (event) => {
      var e = event || window.event || arguments.callee.caller.arguments[0];
      if (e && e.keyCode == 113) {
        this.getList();
      }
    };
  },
  mounted() {
    setTimeout(() => {
      this.isFirstEnter = true;
    }, 100)
    this.clmstates = getSelectList(taskConstants.clmstate);
    this.flag06s = getSelectList(taskConstants.clmFlag06);
    getSsyOrgMap().then(data => this.ssyMap = data);
    getNodeMap().then(data => this.nodeMap = data);
    getDocTypeMap().then(data => this.docTypeMap = data);
  },
  methods: {
    getCreateTime(row, column, cellValue, index) {
      let vapptime = cellValue.substring(0, 14);
      let str = vapptime.substring(0, 4);
      let str1 = vapptime.substring(4, 6);
      let str2 = vapptime.substring(6, 8);
      let str3 = vapptime.substring(8, 10);
      let str4 = vapptime.substring(10, 12);
      let str5 = vapptime.substring(12, 14);
      let getVapptime = str + "-" + str1 + "-" + str2 + " " + str3 + ":" + str4 + ":" + str5;
      console.log(getVapptime);
      return getVapptime;
    },
    getOrgName(value) {
      for (let key in this.ssyMap) {
        if (this.ssyMap[key]["sorgid"] && this.ssyMap[key]["sorgid"] == value) {
          value = this.ssyMap[key]["sorgname"]
          break;
        }
      }
      return value;
    },
    getNodeName(value) {
      if (this.nodeMap && this.nodeMap["CLM" + "_" + value] && this.nodeMap["CLM" + "_" + value].content)
        return this.nodeMap["CLM" + "_" + value].content;
      else
        return value;
    },
    showRemark(taskNo) {
      this.remarkTaskNo = taskNo;
      this.showRemarkFlag = true;
    },
    showChange(taskNo) {
      this.changeTaskNo = taskNo;
      this.showChangeFlag = true;
    },
    hideRemark() {
      this.remarkTaskNo = "";
      this.showRemarkFlag = false;
    },
    hideChange() {
      this.changeTaskNo = '';
      this.showChangeFlag = false;
    },
    showorhide() {
      this.isShow = !this.isShow;
    },
    showAddRenewal() {
      this.showAddRenewalFlag = true;
    },
    hideAddRenewal() {
      this.showAddRenewalFlag = false;
    },
    showImageList(applnum) {
      console.log("applnum:" + applnum);
      this.showImageApplnum = applnum;
      this.showImageFlag = true;
    },
    hideImageList() {
      this.showImageApplnum = '';
      this.showImageFlag = false;
    },
    // 查询列表
    getList() {
      //获取预警任务个数
      this.queryWarnCount();
      this.paginations.total = 0;
      this.tableData = [];
      this.$store.dispatch('loading/CHANGE_LOADING', true)
      this.searchParams.pageNumber = this.paginations.pageIndex;
      this.searchParams.pageSize = this.paginations.pageSize;
      page(this.searchParams).then(res => {
        console.log('参数', this.searchParams);
        console.log('结果', res);
        this.$store.dispatch('loading/CHANGE_LOADING', false)
        if (res.resultCode == constant.SUCCESS && res.data && res.data.list.length) {
          this.paginations.total = res.data.total;
          this.tableData = res.data.list;
          this.tableData.forEach(item => {
            item["orgName"] = this.getOrgName(item.scompanyid);
            item["nodeName"] = this.getNodeName(item.srouteid);
          })
        }

      }).catch(err => {
        this.$store.dispatch('loading/CHANGE_LOADING', false);
      })
    },
    //查询预警个数
    queryWarnCount() {
      /*let routeids = "";
      if (this.searchParams.routeid == '') {
          routeids = taskConstants.RouteId.renewal_hebao + "," + taskConstants.RouteId.renewal_zhhf
      }
      this.warnCount = 0;
      warnOrTimeOutCount(taskConstants.taskBusitype.REAL, routeids).then(res => {
          console.log('结果', res);
          // this.$store.dispatch('loading/CHANGE_LOADING',false)
          if (res.resultCode == constant.SUCCESS && res.data) {
              this.warnCount = res.data;
          }
      }).catch(err => {
          // this.$store.dispatch('loading/CHANGE_LOADING',false);
      })*/
    },
    //获取核保、照会回复的下一节点
    nextNodes() {
      //理赔二核
      getNextNodes(taskConstants.RouteId.clm_underwrite, taskConstants.taskBusitype.CLM).then(res => {
        // this.$store.dispatch('loading/CHANGE_LOADING',false)
        if (res.resultCode == constant.SUCCESS) {
          res.data.forEach(item => {
            this.nextNodeMap[item.destNode] = item;
          });
          this.showNext = true;
        }
      }).catch(err => {
        // this.$store.dispatch('loading/CHANGE_LOADING',false);
      });
    },
    //任务流转
    exchangeNode(routeid) {
      this.$store.dispatch('loading/CHANGE_LOADING', true);
      let arr = [];
      this.$refs.multipleTable.selection.forEach(item => {
        arr.push(item.spno + "_" + item.staskno);
      });
      if (arr.length <= 0) {
        this.$message.error("请选择任务！");
        this.$store.dispatch('loading/CHANGE_LOADING', false);
        return;
      }
      clmExchangeNode(arr, routeid).then(res => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
        if (res.resultCode == constant.SUCCESS) {
          this.getList();
        } else {
          this.$alert(res.resultMsg, '错误信息', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'error',
                message: `action: ${action}`
              });
            }
          });
          this.getList();
        }
      }).catch(err => {
        this.$store.dispatch('loading/CHANGE_LOADING', false);
      })
    },
    //加锁
    lock() {
      this.$store.dispatch('loading/CHANGE_LOADING', true);
      let arr = [];
      this.$refs.multipleTable.selection.forEach(item => {
        arr.push(item.staskno);
      });
      if (arr.length <= 0) {
        this.$message.error("请选择任务！");
        this.$store.dispatch('loading/CHANGE_LOADING', false);
        return;
      }
      clmLock(arr).then(res => {
        this.$store.dispatch('loading/CHANGE_LOADING', false);
        if (res.resultCode == constant.SUCCESS) {
          this.getList();
        } else {
          this.$alert(res.resultMsg, '错误信息', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'error',
                message: `action: ${action}`
              });
            }
          });
        }
      }).catch(err => {
        this.$store.dispatch('loading/CHANGE_LOADING', false);
      })
    },
    //解锁
    unlock() {
      this.$store.dispatch('loading/CHANGE_LOADING', true);
      let arr = [];
      this.$refs.multipleTable.selection.forEach(item => {
        arr.push(item.staskno);
      });
      if (arr.length <= 0) {
        this.$message.error("请选择任务！");
        this.$store.dispatch('loading/CHANGE_LOADING', false);
        return;
      }
      clmUnlock(arr).then(res => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
        if (res.resultCode == constant.SUCCESS) {
          this.getList();
        } else {
          this.$alert(res.resultMsg, '错误信息', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'error',
                message: `action: ${action}`
              });
            }
          });
        }
      }).catch(err => {
        this.$store.dispatch('loading/CHANGE_LOADING', false);
      })
    },
    // 每页多少条切换
    handleSizeChange(pageSize) {
      this.paginations.pageSize = pageSize;
      this.getList();
    },
    // 上下分页
    handleCurrentChange(page) {
      this.paginations.pageIndex = page;
      this.getList();
    },
    // 根据条件查询列表
    subGetList() {
      this.paginations.pageIndex = 1;
      this.getList();
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 清除查询条件
    resetSearch() {
      this.searchParams.chdrnum = '';
      this.searchParams.policyholdername = '';
      this.searchParams.caseno = '';
      this.searchParams.checkoutusrid = '';
      this.searchParams.insuredname = '';
      this.searchParams.spostype = '';
      this.searchParams.clmstate = '';
      this.searchParams.flag06 = '';
      this.$refs.multipleTable.clearSort();
    },
    //预警
    rowStyle({ row, rowIndex }) {
      if (row.clorFlag == '1') {
        return "color:blue !important";
      } else if (row.clorFlag == '2') {
        return "color:red !important";
      } else if (row.clorFlag == '3') {
        return "color:green !important";
      } else {
        return "";
      }
    }
  },
  watch: {
    ssyMap: function (newVal) {
      console.log(newVal);
      console.log(this.ssyMap);
      //重新渲染table
      this.tableData.forEach(item => {
        item["orgName"] = this.getOrgName(item.scompanyid);
      });
      this.tableData.push({});
      this.tableData.pop();
      console.log(this.tableData);
      console.log("重新渲染table");
    },
    nodeMap: function (newVal) {
      //重新渲染table
      this.tableData.forEach(item => {
        item["nodeName"] = this.getNodeName(item.srouteid);
      });
      this.tableData.push({});
      this.tableData.pop();
      console.log(this.tableData);
      console.log("重新渲染table");
    },
  },
  computed: {
    ...mapGetters(['tags']),
  },

}
</script>

<style lang="less" scoped>
.fillcontain {
  padding-bottom: 0;

  .fastQuery {
    padding: 15px 20px 10px 20px;
    background: #fff;
    border-bottom: 1px solid #e1e1e1;

    .fastQuery_title {
      color: #666;
      padding: 6px 0px;
    }

    .fastQuery_item {
      margin: 0 10px;
    }

    .item_default {
      .el-button {
        color: #409EFF !important;
        border-color: #c6e2ff !important;
        background-color: #ecf5ff !important;
      }

    }

    .moreCondition {
      color: #68a3fc;
      cursor: pointer;
      padding: 6px 0px;

      .el-icon-d-arrow-right {
        transform: rotate(90deg);
      }

      .el-icon-d-arrow-left {
        transform: rotate(-90deg);
      }
    }
  }
}

.contain {
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

.pagination {
  padding: 10px 20px;
  text-align: right;
}

.operationIcon {
  // padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-block;
  cursor: pointer;
  box-shadow: 0 0 3px #f9f9f9;

  .svg-icon {
    font-size: 14px;
    fill: #68a3fc;
  }
}

.search_container {
  padding: 20px 20px 0 20px;
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown+.el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>



